<template>
  <Dialog
    title="数据导出"
    center
    v-model="open"
    style="max-width: 650px;min-width: 320px;"
  >
    <div style="text-align: center;padding: 5px 0 15px;line-height: 24px;">
      <div>
        可根据条件筛选导出对应数据
        <el-text type="danger">请勿重复导出</el-text>
      </div>
    </div>
    <FilterForm
      ref="downloadForm"
      :option="filterOptions"
      v-model="formData"
      @submit="onFormSubmit"
    ></FilterForm>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button auto-insert-space type="primary" icon="download" @click="$refs.downloadForm.$refs.form.submit()">导出</el-button>
        <el-button auto-insert-space type="default" icon="CircleClose" @click="handleCloseDialog">关闭</el-button>
      </el-row>
    </template>
  </Dialog>
</template>

<script setup name="CrudDownload">
import useUserStore from "@/store/modules/user"
import FilterForm from '@/components/CrudSearch/FilterForm/index.vue'
import { dayjs, ElNotification } from 'element-plus'
const { proxy } = getCurrentInstance();

const route = useRoute()
const userStore = useUserStore()

const props = defineProps({
  crudRef: {
    type: Object,
    default: () => ({})
  },
  /**
   * 数据导出配置
   * {
   *    api:  导出请求方法
   * }
   */
  option: {
    type: Object,
    default: () => ({})
  }
})

// 判断是否时间范围类型
const isRangeType = (item) => {
  return (item.searchType && item.searchType.indexOf('range') !== -1) || (item.type && item.type.indexOf('range') !== -1)
}

// 表单校验规则处理
const rulesFormatter = (item) => {
  if (!item.rules) {
    item.rules = []
  }
  // 下载表单自定义校验项
  if (item.downloadRules && item.downloadRules instanceof Array) {
    item.rules = [
      ...item.rules,
      ...item.downloadRules
    ]
  }
  if (item._customValidator && item._customValidator instanceof Function) {
    item.rules.push({ validator: item._customValidator.bind({ form: formData.value }), trigger: 'change' })
  }
}

const formData = ref({})
formData.value = props.crudRef._searchForm
const searchRefs = computed(() => props.crudRef.$refs.headerSearch)
const searchOptions = computed(() => searchRefs.value.option)
const searchColumn = computed(() => searchOptions.value.column)
const filterOptions = computed(() => ({
  ...searchOptions.value,
  column: [
    ...(searchColumn.value || [])
      .filter(v => !isRangeType(v))
      .map(i => {
        rulesFormatter(i)
        if (!i.labelWidth || i.labelWidth < 120) {
          i.labelWidth = 120
        }
        return {
          ...i,
          span: 24,
          popperClass: 'crud-search-popper'
        }
      })
  ],
  gutter: 0,
  submitBtn: false,
  emptyBtn: false
}))
const open = defineModel()

const onFormSubmit = (form, done) => {
  if (!props.option || !props.option.api || !(props.option.api instanceof Function)) {
    proxy.$modal.msgError("缺少导出api，请先配置");
    return
  }
  const params = {
    ...(props.option.defaultParams || {}),
    ...form
  }
  Object.keys(params).forEach(item => {
    if (proxy.validatenull(params[item])) {
      delete params[item]
    }
  })
  // Object.keys(params).forEach((key) => {
  //   if (params[key] instanceof Array && params[key].every(i => dayjs(i).isValid())) {
  //     params[key] = params[key].join(',')
  //   }
  // })
  props.option.api(params)
    .then(res => {
      handleCloseDialog()
    })
    .finally(() => {
      done()
    })
}

const handleCloseDialog = () => {
  open.value = false
}

</script>

<style lang="scss">
.custom-download-notification {
  --el-notification-width: auto;
}
</style>